<template>
  <div class="manage">
    <div style="display: flex;align-items: center;justify-content: center;margin-bottom: 10px">
      <el-button :icon="Edit" :plain="true" type="primary" @click="handleManageCollect">管理收藏</el-button>
      <el-button :icon="Edit" :plain="true" type="primary" class="cancel" @click="handleManage" v-if="isManage">全选</el-button>
      <el-button  :icon="Edit" :plain="true" type="primary" @click="handleDelete" :disabled="selectedItemIds.length <= 0" v-if="isManage">删除</el-button>
    </div>
    <ul class="LikeManage">
      <li v-for="item in muCollectByUserId" :key="item.id" class="LikeLi" @click="handleSelect(item)">
        <div class="likeItem">
          <div class="imageItem">
            <img src="https://uniapp213.oss-cn-beijing.aliyuncs.com/image/bjt.webp" style="width: 100%; height: 100%;" />
            <input type="checkbox" :id="'checkbox-' + item.id" v-model="selectedItemIds" :value="item.id" class="checkbox-label" v-if="isManage"/>
            <!--            <label :for="'checkbox-' + item.id" class="checkbox-label">-->
            <!--              <i v-if="selectedItemIds.includes(item.id)" class="el-icon-check"></i>-->
            <!--            </label>-->
          </div>
          <p>{{ item.videoTitle }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {Edit} from '@element-plus/icons-vue'
import {ref, onMounted} from 'vue'
import {findMyLikesByUserId} from '@/api/manage.js'
import {useAlertsStore} from '@/store/modules/home.js'
import {ElMessage} from 'element-plus'
import {reqVedioDeleteCollect} from "@/api/home.js";

const userStore = useAlertsStore()
const muCollectByUserId = ref([])
const selectedItemIds = ref([]) // 存储选中项的id

const findMyCollectByUser = async () => {
  const {user: {id}} = userStore.UserInfo
  let res = await findMyLikesByUserId(id)
    muCollectByUserId.value = res.list || []
}

onMounted(() => {
  findMyCollectByUser()
})

const handleManage = () => {
  // 这里可以添加开启批量管理时的逻辑
  // 例如，全选或全不选
  if (selectedItemIds.value.length === muCollectByUserId.value.length) {
    selectedItemIds.value = [] // 全部取消选择
  } else {
    selectedItemIds.value = muCollectByUserId.value.map(item => item.id) // 全部选择
  }
}
const isManage = ref(false)
const handleManageCollect = () => {
  isManage.value = isManage.value ? false : true
}

const handleDelete = async () => {
  await reqVedioDeleteCollect(
      [...selectedItemIds.value]
  )
  findMyCollectByUser()
}

const handleSelect = (item) => {
  if (!isManage.value) {
    console.log(item, 'item')
    window.open(item.videoUrl)
  } else {
    if (selectedItemIds.value.includes(item.id)) {
      selectedItemIds.value.splice(selectedItemIds.value.indexOf(item.id), 1)
    } else {
      selectedItemIds.value.push(item.id)
    }
  }
}
</script>

<style scoped lang="less">
.manage {
  display: flex;
  flex-direction: column;
  align-items: start;
}

//.cancel {
//  margin-bottom: 10px;
//}
.LikeManage {
  width: 100%;
  height: 550px;
  overflow: scroll;
  display: flex;
  flex-wrap: wrap;
}

.LikeLi {
  margin-right: 20px;
  margin-bottom: 10px;
  cursor: pointer; /* 添加鼠标样式 */
}

.likeItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.imageItem {
  width: 150px;
  height: 200px;
  border-radius: 8px;
  background-color: pink;
  position: relative;
}

.checkbox-label {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
}

.el-icon-check {
  font-size: 14px;
  color: var(--el-color-primary);
}

p {
  margin-top: 10px;
}

.el-button.is-plain {
  --el-button-hover-text-color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-fill-color-blank);
  --el-button-hover-border-color: var(--el-color-primary);
  background-color: transparent;
}


::-webkit-scrollbar {
  display: none;
}
</style>